import React from 'react';
import { connect } from 'dva';
import withRouter from 'umi/withRouter';
import { Motion, spring } from 'react-motion';
// 共用组件
import EsriMap from '../components/EsriMap';
import DataControl from '../components/DataControlShow';
import HeaderSearch from '../components/HeaderSearch';
import InfoPanel from '../components/DataPanel/InfoPanel';
import RightImagePanel1 from '../components/RightPanel/RightImagePanel1';
import RightImagePanel2 from '../components/RightPanel/RightImagePanel2';
import RightImagePanel3 from '../components/RightPanel/RightImagePanel3';
import RightImagePanel4 from '../components/RightPanel/RightImagePanel4';
import RightImagePanel5 from '../components/RightPanel/RightImagePanel5';
import RightImagePanel6 from '../components/RightPanel/RightImagePanel6';
import RightImagePanel7 from '../components/RightPanel/RightImagePanel7';
import RightImagePanel8 from '../components/RightPanel/RightImagePanel8';
import RightImagePanel9 from '../components/RightPanel/RightImagePanel9';
import RightImagePanel10 from '../components/RightPanel/RightImagePanel10';
import RightImagePanel11 from '../components/RightPanel/RightImagePanel11';
import RightImagePanel12 from '../components/RightPanel/RightImagePanel12';
import RightImagePanel13 from '../components/RightPanel/RightImagePanel13';
import RightImagePanel14 from '../components/RightPanel/RightImagePanel14';
import RightImagePanel15 from '../components/RightPanel/RightImagePanel15';
import RightImagePanel16 from '../components/RightPanel/RightImagePanel16';
// import RightImagePanel17 from '../components/RightPanel/RightImagePanel17';
import RightImagePanel18 from '../components/RightPanel/RightImagePanel18';
import RightImagePanel19 from '../components/RightPanel/RightImagePanel19';
import RightImagePanel20 from '../components/RightPanel/RightImagePanel20';
import YangshanPanel from '../components/RightPanel/YangshanPanel';
import RightImagePanel21 from '../components/RightPanel/RightImagePanel21';




import logo2 from '../assets/logo_xh.png';


import {
  createAllRegionPointsAndPolygons,
  openMigrateEchartsLayer,
  openRelationEchartsLayer,
  openCityRelationEchartsLayer,
  openCarRelationEchartsLayer,
  openCooprationEchartsLayer,
  openHeatmapLayer,
  openServiceLayer,
  openGeoJsonLayer,
  updateGeoJsonLayerData,
  closeAllServiceLayers,
  closeAllGeoJsonLayers,
  closePluginLayers,
  locateToPoi,
  goToCamera,
  changeBasemap,
} from '../utils/mapOperationShow';

const mapId = 'main.map';
const domNode = 'map';

class MainPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.getElementsByTagName('body')[0].clientWidth,
      height:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.getElementsByTagName('body')[0].clientHeight,
      currentHoverGeometry: undefined,
      currentHightlightID: '',
      // 区别ServiceLayer、GeoJsonLayer 时间属性过滤不一样
      currentShowServiceLayers: [],
      currentShowGeoJsonLayerIds: [],
      currentOpenedJsonLayerInfo: {},
      currentOverviewCityName: '',
      currentOverviewGDPVal: '',
      currentOverviewPopVal: '',
      currentOverviewAreaVal: '',
      // 时间趋势表数据
      currentLineChartData: undefined,
      currentDataTableConfig: { title: '', domAfterTable: '', dataList: [] },
      // 当前迁徙图数据
      currentMigrateData: [],
      // 交通方式占比
      currentMigrationInfo: {},
      // 只用于统计年鉴
      showDataTable: false,
      showDataChart: false,
      showTimeSlider: false,
      showDataInfo: true,
      showTimeSlider: false,
      // 城市评价chart
      showDataOverview: false,
      //对于断头路等特定专题需指定functionPanel tableListPanel

      //整个右边panel
      showRightPanel: true,
      showYangshan:true,
      showPoiDataSource: [],
    };
    this.onRef = this.onRef.bind(this);
    this.mapZoomHandler = this.mapZoomHandler.bind(this);
    this.onChangeActiveBasemap = this.onChangeActiveBasemap.bind(this);
  }

  componentDidMount() {
    // createAllRegionPointsAndPolygons();
    window['CREATED_GEOJSON_LAYER_IDS'] = [];
    window.addEventListener('resize', this.updateDimensions);
    // setTimeout(500,function(){
    //   this.props.currentRendererItem.id='planArea';//默认显示图层
    // })

    this.props.dispatch({
      type: 'dataInfo/getByDataCode',
      payload: { dataId: 'planArea' },
    });
    this.props.currentRendererItem.id = 'planArea';//默认显示图层


  }

  updateDimensions = () => {
    this.setState({
      width:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.getElementsByTagName('body')[0].clientWidth,
      height:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.getElementsByTagName('body')[0].clientHeight,
    });
  };

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 场景切换
    if (this.props.currentCamera !== nextProps.currentCamera) {
      goToCamera(nextProps.currentCamera);
    }

    //判断selectedData是否变化   将selectedDataTime取出 专门判断时间轴发生变化
    if (
      this.props.currentRendererItem !== nextProps.currentRendererItem ||
      this.props.selectedDataLevel !== nextProps.selectedDataLevel ||
      this.props.selectedDataFetching !== nextProps.selectedDataFetching
    ) {
      if (!nextProps.selectedDataFetching) {
        closeAllGeoJsonLayers(this);
        closePluginLayers();
        if (nextProps.selectedData) {
          const currentRendererItem = nextProps.currentRendererItem;
          if (currentRendererItem.displayType === 'migrateEchartLayer') {
            openMigrateEchartsLayer(nextProps.selectedData, this, '上海', 'in'); //in or out
            //增加点击事件监听 获取图层点击区域
            const { allMigrationInfo } = this.props;
            const currentMigrationInfo = allMigrationInfo.find(
              item => item.regionName === '上海' && item.migrationType === '迁入'
            );
            this.setState({ currentMigrationInfo: currentMigrationInfo });
          } else if (currentRendererItem.displayType === 'relationEchartLayer') {
            openRelationEchartsLayer(nextProps.selectedData, this);
          } else if (currentRendererItem.displayType === 'cityRelationEchartLayer') {
            openCityRelationEchartsLayer(nextProps.selectedData, this);
          } else if (currentRendererItem.displayType === 'carRelationEchartLayer') {
            openCarRelationEchartsLayer(nextProps.selectedData, this);
          } else if (currentRendererItem.displayType === 'cooprationEchartLayer') {
            openCooprationEchartsLayer(nextProps.selectedData, this);
          } else if (currentRendererItem.displayType === 'heatmapLayer') {
          } else {
            // 绘制geojsonLayer
            openGeoJsonLayer(currentRendererItem, this);
          }
        }
      }
    }
    if (this.props.selectedDataFetchingByTime !== nextProps.selectedDataFetchingByTime) {
      // 需保证selectedDataTime 不为空  实时数据没有time 不然在年鉴和实时数据切换存在bug    机场也有time变化 造成切换bug
      if (
        !nextProps.selectedDataFetchingByTime &&
        nextProps.selectedDataTime &&
        this.props.selectedDataTime
      ) {
        const { currentShowGeoJsonLayerIds } = this.state;
        // currentShowGeoJsonLayerIds 暂不能少 第一次打开状态
        if (
          nextProps.selectedData &&
          nextProps.currentRendererItem &&
          currentShowGeoJsonLayerIds.length > 0
        ) {
          const subjectId = nextProps.currentRendererItem.id,
            geometryType = nextProps.currentRendererItem.geometryType,
            levelCode = nextProps.selectedDataLevel,
            uniqueKey = nextProps.currentRendererItem.uniqueKey;
          // 当前数据与打开图层不一致 仅仅是时间变化才会走这一步  fix bug by chrli
          if (currentShowGeoJsonLayerIds[0] !== subjectId + geometryType + levelCode) {
            return;
          }
          updateGeoJsonLayerData(
            window[subjectId + geometryType + levelCode],
            window[subjectId + geometryType + levelCode + 'GRAPHICS'],
            nextProps.selectedData,
            uniqueKey
          );
        }
      }
    }

    if (this.props.currentPoiInfo !== nextProps.currentPoiInfo) {
      console.log(nextProps.currentPoiInfo);
      let poiDisplayName = [];
      if (nextProps.currentPoiInfo) {
        nextProps.currentPoiInfo.map((item, index) => {
          poiDisplayName.push(item.name);
        });
        this.setState({ showPoiDataSource: poiDisplayName ? poiDisplayName : [] });
      } else {
        this.setState({ showPoiDataSource: [] });
      }
    }
  }

  onRef(ref) {
    window['ESRI_MAP_CHILD'] = ref;
  }

  showDrawerHandler = () => {
    this.setState({ showDrawer: true });
  };

  closeDrawerHandler = () => {
    this.setState({ showDrawer: false });
  };

  handleSelectData = selectedItem => {
    // 设置全局状态 id
    console.log('open' + selectedItem.title);
    // camera  是否统一需要通过状态控制
    if (selectedItem.initCamera) {
      const currentCamera = selectedItem.initCamera;
      this.props.dispatch({
        type: 'globalShow/saveSceneCamera',
        payload: currentCamera,
      });
    }
    //basemaptitle 直接换
    if (selectedItem.basemapTitle) {
      changeBasemap(selectedItem.basemapTitle);
    }
    // 绘制的动态图层
    this.props.dispatch({
      type: 'globalShow/changeSelectedData',
      payload: { selectedItem },
    });

    //打开 server发布的service图层
    openServiceLayer(selectedItem.serviceLayer, selectedItem.definitionExpression, this);
    //图例
    if (selectedItem.hasLegend) {
      window['CSJ_LEGEND_EXPAND'].expand();
    } else {
      window['CSJ_LEGEND_EXPAND'].collapse();
    }

    // chartData尚未得到 不能初始化
    this.setState({
      showDataTable: selectedItem.hasTable,
      showDataInfo: selectedItem.hasDataInfo,
      showDataChart: selectedItem.hasChart,
      showRightPanel: true,
      showTimeSlider: selectedItem.hasTimeLine,
      //右上角重置为长三角
      currentHightlightID: '',
      currentOverviewCityName: '',
      currentOverviewPopVal: '',
      currentOverviewAreaVal: '',
      currentOverviewGDPVal: '',
    });

    this.props.dispatch({
      type: 'dataInfo/getByDataCode',
      payload: { dataId: selectedItem.id },
    });
  };

  onResetState = () => {
    console.log('onResetState');
    //layer operation
    // closeAllServiceLayers();
    // closeAllGeoJsonLayers(this);
    // closePluginLayers();
    const {showRightPanel}=this.state;
    if(showRightPanel){
      this.setState({
        showRightPanel: false,showYangshan:false
      });
    }else{
      this.setState({
        showRightPanel: true,
        showYangshan:true
      });
    }


    //component operation
    // window['CSJ_LEGEND_EXPAND'].collapse();
    //reset leftPanel state
    // const selectedItem = { id: 'none' };
    // this.props.dispatch({
    //   type: 'globalShow/changeSelectedData',
    //   payload: { selectedItem },
    // });
  };

  mapZoomHandler(zoomLevel) {
    this.props.dispatch({
      type: 'global/setMapZoomLevel',
      payload: { zoomLevel },
    });
  }

  onChangeActiveBasemap(basemapTitle) {
    return;
  }

  searchPoi = value => {
    locateToPoi(value, this);
    if (this.waitSearch) {
      clearTimeout(this.waitSearch);
    }
    this.waitSearch = setTimeout(() => {
      this.props.dispatch({
        type: 'dataInfo/getPoiAddress',
        payload: { searchContent: value },
      });
    }, 500);
  };

  toggleRightPanel = () => {
    const { showRightPanel } = this.state;
    this.setState({ showRightPanel: !showRightPanel });
  };

  render() {
    const {
      width,
      height,
      currentLineChartData,
      currentOverviewCityName,
      currentOverviewPopVal,
      currentOverviewGDPVal,
      currentOverviewAreaVal,
      currentMigrateData,
      currentMigrationInfo,
      showPoiDataSource,
      showRightPanel,
      showYangshan,
      showDataTable,
      showDataInfo,
      showDataChart,
    } = this.state;

    const {
      dataConfig,
      selectedData,
      selectedDataTitle,
      currentRendererItem,
      currentDataInfo,
    } = this.props;

    return (
      <div>
        <EsriMap
          mapId={mapId}
          domNode={domNode}
          onZoom={this.mapZoomHandler}
          onChangeActiveBasemap={this.onChangeActiveBasemap}
          onRef={this.onRef}
        />
        <div
          style={{
            position: 'absolute',
            top: 0,
            left: 0,
            right: 0,
            height: 60,
            backgroundColor: 'rgba(0,0,0,0.6)',
            paddingTop: 10,
            paddingLeft: 16,
          }}
        >
          {/* <img src={logo2} style={{ height: 40, marginTop: -20 }} /> */}
          <span
            style={{
              color: '#fff',
              fontSize: 25,
              marginLeft: 20,
              fontFamily: 'Microsoft YaHei',
              letterSpacing: 2,
              fontWeight: 'bold',
              textShadow: '#fff 2px 2px 16px',
            }}
          >
            临港新片区规划建设应用平台
          </span>

          <span
            style={{
              marginRight: 30,
              color: '#c0c0c0',
              fontFamily: 'Microsoft YaHei',
              width: 650,
            }}
          >
            <span
              style={{ fontSize: 18, marginLeft: 20, width: 220, float: 'right' }}
            >
              启动区&nbsp;
              <span
                style={{
                  fontSize: 25,
                  fontWeight: 'bold',
                  color: '#00feff',
                  textShadow:
                    '0px 0px 8px #00feff, 0px 0px 42px #00feff, 0px 0px 72px #00feff,0px 0px 150px #00feff',
                }}
              >
                {'119.5'}
              </span>
              &nbsp;{'平方公里'}
            </span>

            <span
              style={{ fontSize: 18, marginLeft: 20, width: 220, float: 'right' }}
            >
              全域&nbsp;
              <span
                style={{
                  fontSize: 25,
                  fontWeight: 'bold',
                  color: '#00feff',
                  textShadow:
                    '0px 0px 8px #00feff, 0px 0px 42px #00feff, 0px 0px 72px #00feff,0px 0px 150px #00feff',
                }}
              >
                {'873'}
              </span>
              &nbsp;{'平方公里'}
            </span>


          </span>
        </div>

        <div>
          <DataControl
            style={{
              position: 'absolute',
              top: 70,
              left: 10,
            }}
            width={350}
            height={height - 80}
            dataConfig={dataConfig}
            onSelectData={this.handleSelectData}
            onResetState={this.onResetState}
          />
        </div>

        <Motion style={{ x: spring(showRightPanel ? 0 : 360) }}>
          {({ x }) => (
            <div>
              {/* <HeaderSearch
                style={{
                  position: 'absolute',
                  top: 70,
                  right: 365,
                  paddingLeft: 8,
                  minWidth: 32,
                  backgroundColor: 'rgba(0,0,0,0.6)',
                  boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
                  WebkitTransform: `translate3d(${x}px, 0, 0)`,
                  transform: `translate3d(${x}px, 0, 0)`,
                }}
                placeholder="搜索"
                dataSource={showPoiDataSource}
                onSearch={value => {
                  this.searchPoi(value);
                }}
                onPressEnter={value => {
                  locateToPoi(value, this);
                }}
              /> */}

              {showDataInfo && currentRendererItem.id == 'planArea' && (
                <RightImagePanel1
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'landlayout' && (
                <RightImagePanel2
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'lifeactfunc' && (
                <RightImagePanel4
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'industryfunc' && (
                <RightImagePanel3
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'publicactfunc' && (
                <RightImagePanel5
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'publictrafficsys' && (
                <RightImagePanel6
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}
              {showDataInfo && currentRendererItem.id == 'planlayout' && (
                <RightImagePanel7
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'plancover' && (
                <RightImagePanel8
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'areaslinkage' && (
                <RightImagePanel10
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'financeheadbay' && (
                <RightImagePanel11
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'centralbusiness' && (
                <RightImagePanel12
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'researchheadbay' && (
                <RightImagePanel13
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'topscientistCom' && (
                <RightImagePanel14
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'lgscitechcity' && (
                <RightImagePanel15
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'landsellstatus' && (
                <RightImagePanel9
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'innovationbelt' && (
                <RightImagePanel16
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'centralindustrybelt' && (
                <RightImagePanel17
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'FXLWcom' && (
                <RightImagePanel20
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'luchaoport' && (
                <RightImagePanel18
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && currentRendererItem.id == 'southairport' && (
                <RightImagePanel19
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}


              {showDataInfo && currentRendererItem.id == 'landsell' && (
                <RightImagePanel21
                  style={{
                    position: 'absolute',
                    top: 70,
                    right: 10,
                    width: 350,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={height - 80}
                />
              )}

              {showDataInfo && showYangshan && currentRendererItem.id == 'planArea' && (
                <YangshanPanel
                  style={{
                    position: 'absolute',
                    bottom: 10,
                    right: 350,
                    width: 370,
                    WebkitTransform: `translate3d(${x}px, 0, 0)`,
                    transform: `translate3d(${x}px, 0, 0)`,
                  }}
                  data={currentDataInfo}
                  height={200}
                />
              )}

            </div>
          )}
        </Motion>
      </div>
    );
  }
}
function mapStateToProps(state) {
  const {
    dataConfig,
    selectedDataTitle,
    selectedDataLevel,
    selectedDataConfig,
    selectedData,
    selectedAllData,
    selectedDataFetching,
    selectedDataFetchingByTime,
    selectedYearbookDataList,
    currentCamera,
    currentRendererItem,
    selectedServiceDataList,
    mapZoomLevel,
  } = state.globalShow;

  const { currentDataInfo, currentPoiInfo, allMigrationInfo } = state.dataInfo;
  const {
    dataType,
    yearList,
    currentYear,
    currentDataLevel,
    currentRegions,
    records,
    renderRecords,
    mapLinked,
  } = state.statData;

  return {
    dataConfig,
    selectedDataTitle,
    selectedDataLevel,
    selectedDataConfig,
    selectedData,
    selectedAllData,
    selectedDataFetching,
    selectedDataFetchingByTime,
    selectedYearbookDataList,
    currentRendererItem,
    selectedServiceDataList,
    mapZoomLevel,
    currentCamera,
    currentDataInfo,
    currentPoiInfo,
    allMigrationInfo,
    statData: {
      dataType,
      yearList,
      currentYear,
      currentDataLevel,
      currentRegions,
      records,
      renderRecords,
      mapLinked,
    },
  };
}

export default withRouter(connect(mapStateToProps)(MainPage));
